<template>
  <div :class="classname">
        <!-- 注册页面 -->
        <div class="container-form container-signup">
            <form action="" class="form">
                <h2 class="form-title">Sign Up</h2>
                <input type="text" placeholder="User" class="input">
                <input type="password" placeholder="Password" class="input">
                <input type="email" placeholder="Email" class="input">
                <input type="text" placeholder="PhoneNumber" class="input">
                <button class="submit">next --></button>
            </form>
        </div>
        <!-- 登录页面 -->
        <div class="container-form container-signin">
            <form action="javascript:void(0);" class="form">
                <h2 class="form-title">Sign In</h2>
                <input type="text" placeholder="User" class="input">
                <input type="password" placeholder="Password" class="input">
                <!-- <a href="javascript:void(0);">forgot your password?</a> -->
                <button class="submit">sign in</button>
            </form>
        </div>
        <!-- 覆盖层 -->
        <div class="container-overlay">
            <div class="overlay">
                <div class="overlay-slide overlay-left">
                    <button class="submit" @click="goSingIn()">sign in</button>
                </div>
                <div class="overlay-slide overlay-right">
                    <button class="submit" @click="goSingUp()">sign up</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            classname:'container'
        }
    },
    methods:{
        goSingIn(){
            this.classname = "container"
        },
        goSingUp(){
            this.classname = "container switch"
        }
    }
}
</script>

<style>
@import "../assets/css/login.css"
</style>